<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅客管理 - 航空订票系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <style>
        .page-header {
            background: linear-gradient(135deg, #1a237e, #3949ab);
            color: white;
            padding: 3rem 0;
            margin-bottom: 2rem;
            border-radius: 0 0 20px 20px;
            position: relative;
            overflow: hidden;
        }
        
        .page-header::before {
            content: '';
            position: absolute;
            top: -50px;
            right: -50px;
            width: 200px;
            height: 200px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }
        
        .page-header::after {
            content: '';
            position: absolute;
            bottom: -80px;
            left: -80px;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 50%;
        }
        
        .page-title {
            font-weight: 700;
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
            position: relative;
            z-index: 1;
        }
        
        .breadcrumb {
            background-color: transparent;
            padding: 0;
            margin-bottom: 0;
            position: relative;
            z-index: 1;
        }
        
        .breadcrumb-item + .breadcrumb-item::before {
            content: "›";
            color: rgba(255, 255, 255, 0.7);
        }
        
        .breadcrumb-item.active {
            color: rgba(255, 255, 255, 0.9);
        }
        
        .breadcrumb-item a {
            color: white;
        }
        
        .search-card {
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            margin-bottom: 2rem;
        }
        
        .search-card:hover {
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
            transform: translateY(-5px);
        }
        
        .passenger-card {
            transition: all 0.3s ease;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 0.5rem;
        }
        
        .passenger-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .alert-message {
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        /* 表格优化 */
        .table {
            table-layout: fixed;
            width: 100%;
        }
        
        .table th, .table td {
            padding: 0.5rem 0.75rem;
            vertical-align: middle;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .id-column {
            width: 5%;
        }
        
        .name-column {
            width: 10%;
        }
        
        .idcard-column {
            width: 15%;
        }
        
        .phone-column {
            width: 11%;
        }
        
        .email-column {
            width: 15%;
        }
        
        .amount-column, .discount-column {
            width: 8%;
        }
        
        .date-column {
            width: 12%;
        }
        
        .action-column {
            width: 16%;
        }
        
        .table td.action-column {
            white-space: normal;
            overflow: visible;
        }
        
        .data-tooltip {
            position: relative;
            cursor: pointer;
        }
        
        .data-tooltip:hover::after {
            content: attr(data-full);
            position: absolute;
            left: 0;
            top: 100%;
            z-index: 999;
            background: #333;
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            white-space: nowrap;
            font-size: 0.85rem;
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
        }
        
        @media (max-width: 991.98px) {
            .page-title {
                font-size: 2rem;
            }
            
            .btn-responsive-block {
                display: block;
                width: 100%;
                margin-bottom: 0.5rem;
            }
            
            .btn-group-responsive {
                display: flex;
                flex-direction: column;
            }
            
            .btn-group-responsive .btn {
                border-radius: 0.25rem !important;
                margin-bottom: 0.25rem;
            }
            
            .table-container {
                margin: 0 -15px;
            }
            
            .card-with-pills .nav-pills {
                overflow-x: auto;
                white-space: nowrap;
                display: flex;
                margin-bottom: 1rem;
                padding-bottom: 0.5rem;
            }
            
            .card-with-pills .nav-pills .nav-item {
                flex: 0 0 auto;
            }
            
            .passenger-cards {
                margin-top: 1.5rem;
            }
        }
        
        /* 添加卡片式布局用于小屏幕 */
        .passenger-info-card {
            display: none;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            margin-bottom: 1rem;
            padding: 1rem;
            border-left: 5px solid #3949ab;
        }
        
        .passenger-info-card .info-row {
            display: flex;
            margin-bottom: 0.5rem;
            align-items: center;
        }
        
        .passenger-info-card .info-label {
            font-weight: bold;
            width: 90px;
            color: #555;
        }
        
        .passenger-info-card .info-value {
            flex: 1;
        }
        
        .passenger-info-card .card-actions {
            margin-top: 1rem;
            display: flex;
            justify-content: flex-end;
        }
        
        @media (max-width: 767.98px) {
            .table-view {
                display: none;
            }
            
            .card-view {
                display: block;
            }
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/flightbooking/"><i class="fas fa-plane mr-2"></i>航空订票系统</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/"><i class="fas fa-home mr-1"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/flights"><i class="fas fa-plane-departure mr-1"></i> 航班管理</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="/flightbooking/passengers"><i class="fas fa-users mr-1"></i> 旅客管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/tickets"><i class="fas fa-ticket-alt mr-1"></i> 票务管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/dashboard"><i class="fas fa-chart-line mr-1"></i> 统计面板</a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0 d-none d-lg-flex">
                    <div class="input-group">
                        <input class="form-control" type="search" placeholder="快速搜索" aria-label="Search">
                        <div class="input-group-append">
                            <button class="btn btn-light" type="submit"><i class="fas fa-search"></i></button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </nav>

    <div class="page-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h1 class="page-title animate__animated animate__fadeInUp">旅客管理</h1>
                    <nav aria-label="breadcrumb" class="animate__animated animate__fadeInUp animate__delay-1s">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="/flightbooking/"><i class="fas fa-home"></i> 首页</a></li>
                            <li class="breadcrumb-item active" aria-current="page">旅客管理</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-md-6 text-right">
                    <a href="/flightbooking/passengers/add" class="btn btn-light btn-lg animate__animated animate__fadeInUp animate__delay-1s">
                        <i class="fas fa-user-plus mr-2"></i>添加旅客
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="container mt-4">
        <!-- 成功消息提示 -->
        <div class="alert alert-success alert-dismissible fade show alert-message animate__animated animate__fadeInUp" role="alert" th:if="${message != null}">
            <i class="fas fa-check-circle mr-2"></i> <span th:text="${message}"></span>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>

        <div class="card search-card animate__animated animate__fadeInUp">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-search mr-2"></i>旅客搜索</h5>
            </div>
            <div class="card-body">
                <form action="/flightbooking/passengers/search" method="get">
                    <div class="form-row">
                        <div class="form-group col-md-5">
                            <label for="name"><i class="fas fa-user mr-1"></i>姓名</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-user"></i></span>
                                </div>
                                <input type="text" class="form-control" id="name" name="name" placeholder="输入旅客姓名">
                            </div>
                        </div>
                        <div class="form-group col-md-5">
                            <label for="idCard"><i class="fas fa-id-card mr-1"></i>身份证号</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-id-card"></i></span>
                                </div>
                                <input type="text" class="form-control" id="idCard" name="idCard" placeholder="输入身份证号">
                            </div>
                        </div>
                        <div class="form-group col-md-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary btn-block shadow-sm"><i class="fas fa-search mr-1"></i> 搜索</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="card animate__animated animate__fadeInUp animate__delay-1s card-with-pills">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-list-alt mr-2"></i>旅客列表</h5>
                <div class="d-none d-sm-block">
                    <span class="badge badge-light" th:text="${passengers != null ? passengers.size() + ' 位旅客' : '0 位旅客'}">0 位旅客</span>
                </div>
            </div>
            <div class="card-body">
                <!-- 表格视图 - 适用于中大屏幕 -->
                <div class="table-view">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th class="id-column">ID</th>
                                <th class="name-column">姓名</th>
                                <th class="idcard-column">身份证号</th>
                                <th class="phone-column">联系电话</th>
                                <th class="email-column">电子邮箱</th>
                                <th class="amount-column">购票金额</th>
                                <th class="discount-column">VIP折扣</th>
                                <th class="date-column">注册时间</th>
                                <th class="action-column">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="passenger : ${passengers}" class="passenger-card">
                                <td th:text="${passenger.passengerId}">1</td>
                                <td>
                                    <i class="fas fa-user-circle text-primary mr-1"></i>
                                    <span th:text="${passenger.name}" th:data-full="${passenger.name}" class="data-tooltip">张三</span>
                                </td>
                                <td>
                                    <span th:text="${passenger.idCard.substring(0, 6) + '...' + passenger.idCard.substring(14)}" 
                                          th:data-full="${passenger.idCard}" 
                                          class="data-tooltip">110101******1234</span>
                                </td>
                                <td>
                                    <i class="fas fa-phone text-success mr-1"></i>
                                    <span th:text="${passenger.phone}" th:data-full="${passenger.phone}" class="data-tooltip">138****8000</span>
                                </td>
                                <td>
                                    <i class="fas fa-envelope text-info mr-1"></i>
                                    <span th:text="${passenger.email != null && passenger.email.length() > 15 ? passenger.email.substring(0, 12) + '...' : passenger.email}"
                                          th:data-full="${passenger.email}"
                                          class="data-tooltip">zhangs...</span>
                                </td>
                                <td>
                                    <span class="badge badge-light">¥<span th:text="${passenger.totalPurchase}">0.00</span></span>
                                </td>
                                <td>
                                    <span class="badge badge-primary" th:text="${passenger.vipDiscount + '折'}">1.00折</span>
                                </td>
                                <td th:text="${#dates.format(passenger.registrationDate, 'yyyy-MM-dd')}">2023-06-01</td>
                                <td class="action-column">
                                    <div class="btn-group btn-group-sm">
                                        <a th:href="@{/passengers/{id}(id=${passenger.passengerId})}" class="btn btn-info" title="查看详情">
                                            <i class="fas fa-info-circle"></i>
                                        </a>
                                        <a th:href="@{/passengers/edit/{id}(id=${passenger.passengerId})}" class="btn btn-warning text-white" title="编辑">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <a th:href="@{/passengers/delete/{id}(id=${passenger.passengerId})}" class="btn btn-danger" 
                                           onclick="return confirm('确定要删除此旅客吗？删除后将无法恢复，且可能影响相关订票数据。')"
                                           title="删除">
                                            <i class="fas fa-trash-alt"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            <tr th:if="${#lists.isEmpty(passengers)}">
                                <td colspan="9" class="text-center py-5">
                                    <i class="fas fa-users-slash fa-4x text-muted mb-3 d-block"></i>
                                    <h4 class="text-muted">暂无旅客信息</h4>
                                    <p class="mb-3">当前系统中没有旅客信息记录</p>
                                    <a href="/flightbooking/passengers/add" class="btn btn-primary mt-2">
                                        <i class="fas fa-user-plus mr-1"></i> 添加旅客
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 卡片视图 - 适用于小屏幕 -->
                <div class="card-view passenger-cards" style="display: none;">
                    <div th:each="passenger : ${passengers}" class="passenger-info-card">
                        <div class="d-flex justify-content-between mb-2">
                            <h5 class="mb-0">
                                <i class="fas fa-user-circle text-primary mr-1"></i>
                                <span th:text="${passenger.name}">张三</span>
                            </h5>
                            <span class="badge badge-primary" th:text="${passenger.vipDiscount + '折'}">1.00折</span>
                        </div>
                        <div class="info-row">
                            <div class="info-label">ID：</div>
                            <div class="info-value" th:text="${passenger.passengerId}">1</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">身份证：</div>
                            <div class="info-value" th:text="${passenger.idCard.substring(0, 6) + '******' + passenger.idCard.substring(14)}">110101******1234</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">联系电话：</div>
                            <div class="info-value">
                                <i class="fas fa-phone text-success mr-1"></i>
                                <span th:text="${passenger.phone}">13800138000</span>
                            </div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">电子邮箱：</div>
                            <div class="info-value">
                                <i class="fas fa-envelope text-info mr-1"></i>
                                <span th:text="${passenger.email}">zhangsan@example.com</span>
                            </div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">购票金额：</div>
                            <div class="info-value">¥<span th:text="${passenger.totalPurchase}">0.00</span></div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">注册时间：</div>
                            <div class="info-value" th:text="${#dates.format(passenger.registrationDate, 'yyyy-MM-dd')}">2023-06-01</div>
                        </div>
                        <div class="card-actions">
                            <div class="btn-group btn-group-sm">
                                <a th:href="@{/passengers/{id}(id=${passenger.passengerId})}" class="btn btn-info">
                                    <i class="fas fa-info-circle mr-1"></i> 详情
                                </a>
                                <a th:href="@{/passengers/edit/{id}(id=${passenger.passengerId})}" class="btn btn-warning text-white">
                                    <i class="fas fa-edit mr-1"></i> 编辑
                                </a>
                                <a th:href="@{/passengers/delete/{id}(id=${passenger.passengerId})}" class="btn btn-danger" 
                                   onclick="return confirm('确定要删除此旅客吗？删除后将无法恢复，且可能影响相关订票数据。')">
                                    <i class="fas fa-trash-alt mr-1"></i> 删除
                                </a>
                            </div>
                        </div>
                    </div>
                    <div th:if="${#lists.isEmpty(passengers)}" class="text-center py-5">
                        <i class="fas fa-users-slash fa-4x text-muted mb-3 d-block"></i>
                        <h4 class="text-muted">暂无旅客信息</h4>
                        <p class="mb-3">当前系统中没有旅客信息记录</p>
                        <a href="/flightbooking/passengers/add" class="btn btn-primary mt-2">
                            <i class="fas fa-user-plus mr-1"></i> 添加旅客
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="bg-dark text-light mt-5 py-4">
        <div class="container">
            <div class="row">
                <div class="col-md-4 text-center text-md-left mb-3 mb-md-0">
                    <h5><i class="fas fa-plane mr-2"></i>航空订票系统</h5>
                    <p class="mb-0">提供便捷、高效的航班预订服务</p>
                </div>
                <div class="col-md-4 text-center mb-3 mb-md-0">
                    <h5>快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="/flightbooking/flights" class="text-light"><i class="fas fa-angle-right mr-2"></i>航班查询</a></li>
                        <li><a href="/flightbooking/passengers" class="text-light"><i class="fas fa-angle-right mr-2"></i>旅客管理</a></li>
                        <li><a href="/flightbooking/tickets" class="text-light"><i class="fas fa-angle-right mr-2"></i>机票预订</a></li>
                    </ul>
                </div>
                <div class="col-md-4 text-center text-md-right">
                    <h5>联系我们</h5>
                    <p class="mb-0">客服热线: 400-123-4567</p>
                    <div class="mt-3">
                        <a href="#" class="text-light mr-3"><i class="fab fa-weixin fa-lg"></i></a>
                        <a href="#" class="text-light mr-3"><i class="fab fa-weibo fa-lg"></i></a>
                        <a href="#" class="text-light"><i class="fas fa-envelope fa-lg"></i></a>
                    </div>
                    <p class="mt-3 mb-0">© 2023 航空订票系统 - JZA04</p>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/main.js"></script>
    <script>
        $(document).ready(function() {
            // 检查屏幕宽度，决定显示哪种视图
            function checkViewport() {
                if (window.innerWidth < 768) {
                    $('.table-view').hide();
                    $('.card-view').show();
                } else {
                    $('.table-view').show();
                    $('.card-view').hide();
                }
            }
            
            // 页面加载和窗口大小变化时检查
            checkViewport();
            $(window).resize(checkViewport);
            
            // 初始化工具提示
            $('[title]').tooltip();
            
            // 添加数据行悬停效果
            $('.table tr').hover(
                function() {
                    $(this).css('background-color', '#f8f9fa');
                },
                function() {
                    $(this).css('background-color', '');
                }
            );
        });
    </script>
</body>
</html> 